<script setup lang="ts">
import { Popup } from "vant";
import { ref, onMounted, onActivated } from "vue";
import MoneyRainBackground from "@/components/Activit/distriAgent/moneyRainBackground.vue";
import { ActivityAxios } from "@/api";
import { useI18n } from "vue-i18n";
// import { FiltrationFun } from "@/utils";
import rainvbg1 from "@/image/new_img/activity/rainv2_bg1.png";
import rainvbg2 from "@/image/new_img/activity/rainv2_bg2.png";
import { showSuccessToast, showFailToast } from "vant";
import { UserStore, MessageStore } from "@/store";
import { RouterEnums } from "@/types";
import { useRouter } from "vue-router";
import moment from "moment";
const router = useRouter();
const { t } = useI18n();
const userStore = UserStore();
const messageStore = MessageStore();
const popupShow = ref(false);
const cloturePopup = () => {
  closeMoneyRain();
};
onMounted(() => {
  if (messageStore.openCashRainStatus) {
    popupShow.value = true;
  }
  //getTiemList();
});
onActivated(() => {
  if (messageStore.openCashRainStatus) {
    popupShow.value = true;
  }
  getTiemList();
  getconfigDesc();
});
const redRainTime: any = ref({
  flag: 0, //领取按钮是否显示,0不显示,1显示
  list: [], //红包雨设置时间
  receiceFlag: 0, //0不可领取,1已领取,2可领取
});
//获取红包雨时间
const getTiemList = () => {
  ActivityAxios.getRedRainTime({ actType: 9 }).then(res => {
    redRainTime.value = res;
  });
};
//const clarify: any = ref([]);
// //获取活动说明
// const getActClarify = () => {
//   clarify.value = FiltrationFun.getconfigDesc(9);
// }; showLoadingToast, closeToast,
//获取红包雨
const getReceiveRedRain = () => {
  if (userStore.isLogin) {
    // showLoadingToast({
    //   message: "",
    //   forbidClick: true,
    // });
    ActivityAxios.getReceiveRedRain()
      .then(res => {
        //领取成功
        if (res.receiceFlag === 1) {
          // showToast(t("toastText.alreadyCollected"));
          showSuccessToast("toastText.alreadyCollected");
          getTiemList();
        } else {
          showFailToast("tip.getErr");
          //showToast(t("toastText.alreadyCollected"));
        }
      })
      .finally(() => {});
  } else {
    router.push(RouterEnums.LOGIN);
  }
};
//打开红包雨活动
const openMoneyRain = () => {
  popupShow.value = true;
};
//关闭红包雨活动
const closeMoneyRain = () => {
  popupShow.value = false;
  messageStore.setOpenCashRainStatus();
};
const closePopup = () => {
  closeMoneyRain();
};
defineExpose({ openMoneyRain });
//活动 描述
const texts: any = ref([]);
const getconfigDesc = () => {
  ActivityAxios.getActConfigDesc({ actType: 9 }).then((res: any) => {
    texts.value = res.list;
  });
};
</script>
<template>
  <Popup
    v-model:show="popupShow"
    position="center"
    z-index="5000"
    duration="0.1"
    style="height: 100%; max-width: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5)"
    :overlay="false"
    :safe-area-inset-top="true"
    :safe-area-inset-bottom="true"
    overlay-class="overlay-Popup"
    @close="closePopup"
  >
    <MoneyRainBackground @cloturePopup="cloturePopup" />
    <div class="content-frame" v-if="redRainTime.flag === 0">
      <div class="moneyRain-content">
        <div class="rainv2-title-frame">
          <img class="rainv2-title" src="@/image/new_img/activity/rainv2_top_title_1.png" />
          <img
            class="cloture-img"
            src="@/image/new_img/activity/rainv2_close.png"
            @click="closeMoneyRain()"
          />
          <div class="title-text-frame">
            <div class="text1">{{ t("activity.redRain.redRainActTitle") }}</div>
            <div class="text2">
              <span>{{ t("currencyType.pt") }}</span>
              <span class="text2-light">7.77</span>
            </div>
          </div>
          <div class="dianzi"></div>
          <div class="time-frame">
            <div class="title2text">{{ t("activity.redRain.sixTimes") }}</div>
            <div class="time-list-frame">
              <div
                class="grid-item df ai-center jc-center"
                v-for="(item, index) in redRainTime.list"
                :key="index"
              >
                <img class="shijian-img" src="@/image/new_img/activity/shijian.png" />
                <span>{{ item }}</span>
              </div>
            </div>
          </div>
          <!-- 分割线 -->
          <div class="divider-frame df ai-center jc-center">
            <div class="divider-div"></div>
            <div class="divider-name">{{ t("activity.eventDescription") }}</div>
            <div class="divider-div divider-div-rigth"></div>
          </div>
          <!-- 说明 -->
          <div class="highlight-frame">
            <!-- <Highlight :keywords="keywords" :source-string="text"/> -->
            <div v-for="(items, index) in texts" :key="index" class="textWrap">
              {{ `${index + 1}.${items?.actDescContent}` }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-frame2" v-if="redRainTime.flag === 1">
      <div class="content-frame2-frame">
        <img class="background-img" :src="redRainTime.receiceFlag === 2 ? rainvbg1 : rainvbg2" />
        <div class="getRain-frame" v-if="redRainTime.receiceFlag === 2">
          <div class="title-text">{{ t("activity.redRain.moneyRain") }}</div>
          <img class="rain-logo" src="@/image/new_img/activity/rainv2_redpackage.png" />
          <div class="rainv2-frame df">
            <img src="@/image/new_img/activity/rainv2_star.png" />
            <div class="slogans-text">{{ t("activity.redRain.slogans1") }}</div>
          </div>
          <div class="rainv2-frame df maintop20">
            <img src="@/image/new_img/activity/rainv2_star.png" />
            <div class="slogans-text">{{ t("activity.redRain.slogans2") }}</div>
          </div>
          <img class="getimg-frame" src="@/image/new_img/activity/rainv2_btn1.png" />
          <div class="click-grab df ai-center jc-center" @click="getReceiveRedRain">
            {{ t("activity.redRain.grab") }}
          </div>
          <img
            class="cloture-img2"
            src="@/image/new_img/activity/rainv2_close.png"
            @click="closeMoneyRain()"
          />
        </div>
        <div class="getRain-frame" v-if="redRainTime.receiceFlag === 1">
          <div class="title-text">{{ t("activity.redRain.moneyRain") }}</div>
          <img class="rain-logo2" src="@/image/new_img/activity/rainv2_money.png" />
          <div class="money-frame df ai-center jc-center">
            {{ t("currencyType.pt") }}
            <span class="money-val-frame">{{ redRainTime.claimAmount / 100 }}</span>
          </div>
          <div class="getTime-frame">
            {{ t("activity.redRain.collectionTime") }}
            <div class="getTime-val">
              {{ moment(redRainTime.claimTime).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </div>
          <img
            class="getimg-frame"
            src="@/image/new_img/activity/rainv2_btn2.png"
            @click="popupShow = false"
          />
          <div class="click-grab click-grab2 df ai-center jc-center">
            {{ t("activity.redRain.accept") }}
          </div>
          <img
            class="cloture-img2"
            src="@/image/new_img/activity/rainv2_close.png"
            @click="closeMoneyRain()"
          />
        </div>
      </div>
    </div>
  </Popup>
</template>
<style lang="less" scoped>
.moneyRain-frame {
  width: 100%;
  height: 100%;
}
.content-frame {
  width: 100%;
  height: 978px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 21;
  transform: translate(-50%, -60%);
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
  .moneyRain-content {
    position: absolute;
    width: 666px;
    height: 978px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
    background-image: linear-gradient(150deg, #fcff3e 0%, #ff5ee8 100%);
    border-radius: 82px;
  }
}
.overlay-Popup {
  max-width: 100%;
}
.rainv2-title-frame {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  right: 0;
  .rainv2-title {
    position: absolute;
    left: 0;
    top: -30px;
    z-index: 1;
    width: 100%;
    height: 444px;
  }
  .cloture-img {
    width: 46px;
    height: 46px;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 2;
  }
  .title-text-frame {
    width: 100%;
    height: auto;
    position: absolute;
    top: 210px;
    left: 0px;
    z-index: 2;
    .text1 {
      width: 100%;
      height: 75px;
      line-height: 75px;
      font-weight: 700;
      text-align: center;
      font-size: 28px;
    }
    .text2 {
      width: 100%;
      font-weight: 700;
      text-align: center;
      font-size: 28px;
      margin-top: -10px;
      .text2-light {
        color: #e000a0;
        font-size: 48px;
        margin-left: 10px;
      }
    }
  }
  .dianzi {
    width: 100px;
    height: 350px;
  }
  .time-frame {
    width: 546px;
    height: 240px;
    margin: auto;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 34px;
    .title2text {
      width: 100%;
      text-align: center;
      padding-top: 34px;
      font-size: 32px;
      color: rgb(151, 0, 108);
      font-weight: 700;
    }
  }
  .time-list-frame {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列，每列等宽 */
    gap: 6px; /* 列和行之间的间距 */
    width: 100%;
  }
  .grid-item {
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
    font-size: 24px;
    margin-top: 22px;
    .shijian-img {
      width: 24px;
      height: 24px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
.content-frame2 {
  width: 500px;
  height: 666px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 21;
  margin: auto;
  margin-top: -4.44rem;
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
  .content-frame2-frame {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .background-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 666px;
  }
  .getRain-frame {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    text-align: center;
    .title-text {
      width: 100%;
      height: 80px;
      padding-top: 16px;
      text-align: center;
      line-height: 80px;
      color: rgb(187, 0, 134);
      font-size: 32px;
    }
    .rain-logo {
      width: 166px;
      height: 166px;
    }
    .rain-logo2 {
      width: 166px;
      height: 138px;
    }
    .rainv2-frame {
      width: 346px;
      height: auto;
      font-size: 26px;
      margin: auto;
      text-align: left;
      img {
        width: 22px;
        height: 22px;
        margin-right: 10px;
        margin-top: 6px;
      }
      .slogans-text {
        line-height: 36px;
      }
    }
    .maintop20 {
      margin-top: 20px;
    }
    .getimg-frame {
      width: 100%;
      height: 182px;
    }
    .getimg-frame2 {
    }
    .getTime-frame {
      font-size: 28px;
      margin-top: 36px;
    }
    .getTime-val {
      margin-top: 20px;
    }
    .click-grab {
      position: absolute;
      bottom: 80px;
      left: 0;
      right: 0;
      z-index: 5;
      font-size: 24px;
      color: rgb(255, 255, 255);
      width: 100px;
      height: 100px;
      text-align: center;
      margin: auto;
    }
    .click-grab2 {
      bottom: 60px;
      color: rgba(0, 0, 0, 0.65);
    }
    .cloture-img2 {
      width: 38px;
      height: 38px;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 20;
      bottom: -50px;
    }
    .money-frame {
      font-size: 38px;
      color: rgba(0, 0, 0, 0.65);
    }
    .money-val-frame {
      color: rgb(224, 0, 160);
      font-weight: 700;
      font-size: 96px;
      margin-left: 10px;
    }
  }
}
/***********活动说明*************/
.divider-frame {
  width: 100%;
  height: auto;
  margin-top: 50px;

  .divider-div {
    width: 30%;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  }

  .divider-div-rigth {
    transform: scaleX(-1);
  }

  .divider-name {
    color: rgba(0, 0, 0, 0.65);
    font-size: 28px;
    margin-left: 13px;
    margin-right: 13px;
  }
}
.highlight-frame {
  width: 675px;
  height: auto;
  margin: auto;
  margin-top: 20px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 22px;
  line-height: 30px;
  .textWrap {
    margin: 0 20px 0;
    word-wrap: break-word;
    margin-bottom: 20px;
  }
}
</style>
